| antd vue Tree树形控件的使用 | 您所在的位置：网站首页 › vue 树形控件 › antd vue Tree树形控件的使用 |
antd vue Tree树形控件的使用
|
文档：https://antdv.com/components/tree-cn/#API 何时使用 文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 基本使用 const treeData = [ { title: '0-0', key: '0-0', children: [ { title: '0-0-0', key: '0-0-0', children: [ { title: '0-0-0-0', key: '0-0-0-0' }, { title: '0-0-0-1', key: '0-0-0-1' }, { title: '0-0-0-2', key: '0-0-0-2' }, ], }, { title: '0-0-1', key: '0-0-1', children: [ { title: '0-0-1-0', key: '0-0-1-0' }, { title: '0-0-1-1', key: '0-0-1-1' }, { title: '0-0-1-2', key: '0-0-1-2' }, ], }, { title: '0-0-2', key: '0-0-2', }, ], }, { title: '0-1', key: '0-1', children: [ { title: '0-1-0-0', key: '0-1-0-0' }, { title: '0-1-0-1', key: '0-1-0-1' }, { title: '0-1-0-2', key: '0-1-0-2' }, ], }, { title: '0-2', key: '0-2', }, ]; export default { data() { return { expandedKeys: ['0-0-0', '0-0-1'], autoExpandParent: true, checkedKeys: ['0-0-0'], selectedKeys: [], treeData, }; }, watch: { checkedKeys(val) { console.log('onCheck', val); }, }, methods: { onExpand(expandedKeys) { console.log('onExpand', expandedKeys); // if not set autoExpandParent to false, if children expanded, parent can not collapse. // or, you can remove all expanded children keys. this.expandedKeys = expandedKeys; this.autoExpandParent = false; }, onCheck(checkedKeys) { console.log('onCheck', checkedKeys); this.checkedKeys = checkedKeys; }, onSelect(selectedKeys, info) { console.log('onSelect', info); this.selectedKeys = selectedKeys; }, }, };效果
参考：https://www.jianshu.com/p/a293d1589c24 组件设置 method onBusinessSelectChange(selectedKeys, info) { console.log('selectedKeys changed: ', selectedKeys); console.log('info changed: ', info); // 已勾选子节点以及半勾选状态的父节点 this.allSelectedNodes = selectedKeys.concat(info.halfCheckedKeys); this.businessSelectedRowKeys = selectedKeys; console.log('所有节点包含半勾选父节点', this.allSelectedNodes); console.log('所有节点不包含半勾选父节点', this.businessSelectedRowKeys); },效果
我们给后台传过去了父节点，如果有反显的情况下(如：修改，查看功能)，一旦有父节点，子节点又将会全部勾选！！这种情况下又该怎么办呢？ 思路如下： 1.循环遍历出组件数据最深层子节点，存放在一个数组中 2.将后台返回的含有父节点的数组和第一步骤遍历的数组做比较 3.如果有相同值，将相同值取出来，push到一个新数组中 4.利用这个新的重组的数组给Tree组件selected赋值 例： data 中初始化值 //tree select 树选择最深子节点 test:[], // 1.循环遍历出最深层子节点，存放在一个数组中 getTreeChildren(data){ data&&data.map(item=>{ if(item.children && item.children.length > 0){ this.getTreeChildren(item.children); }else{ this.test.push(item.key); }; return null; }); return this.test; }, // 2.将后台返回的含有父节点的数组和第一步骤遍历的数组做比较 // 3.如果有相同值，将相同值取出来，push到一个新数组中 compareItem(all_data,child_data){ let uniqueChild = []; for(var i in child_data){ for(var k in all_data){ if(all_data[k] === child_data[i]){ uniqueChild.push(all_data[k]); } } } return uniqueChild; }, //授权编辑 authorizeEdit(text, record, index) { //显示对话框 this.authorize_visible = true; //重置授权树选择 this.authorize_value = [] this.nowEditRoleId = record.id this.axios.get(process.env.VUE_APP_API_URL + this.urls.getNodesByRoleId,{params: { id : record.id, }}).then((data) => { console.log(data.data.data, 'node。。。。。。。'); //遍历后台数据 var all_data = []; for(var i = 0; i < data.data.data.length; i++){ all_data.push(data.data.data[i].id); } //1.获取组件最深子节点,tree的data var child_data = this.getTreeChildren(this.treeData); console.log(child_data,'child_data........'); //2,3 获取相同的子节点 console.log(all_data,'all_data........'); var uniqueChild = this.compareItem(all_data,child_data); console.log(uniqueChild,'uniqueChild........'); //4.利用这个新的重组的数组给Tree组件selected赋值 this.authorize_value = uniqueChild; }); }, |
【本文地址】
公司简介
联系我们